<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>更新页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link
      rel="stylesheet"
      href="/app/admin/component/jsoneditor/css/jsoneditor.css"
    />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
  </head>
  <body>
    <form class="layui-form">
      <div class="mainBox">
        <div class="main-container mr-5">
          <div class="layui-form-item">
            <label class="layui-form-label required">线路</label>
            <div class="layui-input-block">
              <div name="line_id" id="line_id" required value=""></div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label required">地区</label>
            <div class="layui-input-block">
              <div name="region_id" id="region_id" required value=""></div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label required">服务器</label>
            <div class="layui-input-block">
              <div name="server_id" id="server_id" required value=""></div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label required">节点编号</label>
            <div class="layui-input-block">
              <input type="text" name="code" value="" required lay-verify="required" placeholder="请输入节点编号" class="layui-input"/></div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label required">ip</label>
            <div class="layui-input-block">
              <input type="text" name="ip" value="" required lay-verify="required" placeholder="请输入ip" class="layui-input"/>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">端口</label>
            <div class="layui-input-block">
              <input type="text" name="port" value="" placeholder="请输入端口" class="layui-input"/>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">内网ip</label>
            <div class="layui-input-block">
              <input type="text" name="ip_ems" value="" placeholder="请输入内网ip" class="layui-input"/>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom">
        <div class="button-container">
          <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">提交</button>
          <button type="reset" class="pear-btn pear-btn-md">重置</button>
        </div>
      </div>
    </form>

    <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
    <script src="/app/admin/admin/js/permission.js"></script>

    <script>
      // 相关接口
      const PRIMARY_KEY = 'id'
      const SELECT_API = '/app/admin/v1-node-static/select' + location.search
      const UPDATE_API = '/app/admin/v1-node-static/update'

      // 获取数据库记录
      layui.use(['form', 'util', 'popup'], function () {
        let $ = layui.$
        $.ajax({
          url: SELECT_API,
          dataType: 'json',
          success: function (res) {
            // 给表单初始化数据
            layui.each(res.data[0], function (key, value) {
              let obj = $('*[name="' + key + '"]')
              if (key === 'password') {
                obj.attr('placeholder', '不更新密码请留空')
                return
              }
              if (typeof obj[0] === 'undefined' || !obj[0].nodeName) return
              if (obj[0].nodeName.toLowerCase() === 'textarea') {
                obj.val(value)
              } else {
                obj.attr('value', value)
                obj[0].value = value
              }
            })

            const getAraes = function (line_id,id) {
              layer.load()
              layui.$.ajax({
                url: '/app/admin/v1-region/select2?format=tree',
                data: {
                  field: PRIMARY_KEY,
                  order: 'desc',
                  line_id: line_id,
                  id:id,
                },
                dataType: 'json',
                success: function (res) {
                  let value = layui.$('#region_id').attr('value')
                  let initValue = value ? value.split(',') : []
                  layui.xmSelect.render({
                    el: '#region_id',
                    name: 'region_id',
                    initValue: initValue,
                    filterable: true,
                    data: res.data,
                    model: { icon: 'hidden', label: { type: 'text' } },
                    clickClose: true,
                    radio: true,
                    layVerify: 'required',
                  })
                  layer.closeAll('loading')
                  if (res.code) {
                    layui.popup.failure(res.msg)
                  }
                },
              })
            }

            const getLines = function () {
              layui.xmSelect.render({
                el: '#region_id',
                name: 'region_id',
                filterable: false,
                data: [],
                model: { icon: 'hidden', label: { type: 'text' } },
                clickClose: false,
                radio: true,
                layVerify: 'required',
              })

              layui.$.ajax({
                url: '/app/admin/v1-line/select2?format=tree',
                data: {
                  field: 'weight',
                  order: 'desc',
                },
                dataType: 'json',
                success: function (res) {
                  let value = layui.$('#line_id').attr('value')
                  let initValue = value ? value.split(',') : []

                  if (initValue.length) {
                    getAraes(value)
                  }

                  layui.xmSelect.render({
                    el: '#line_id',
                    name: 'line_id',
                    initValue: initValue,
                    filterable: true,
                    data: res.data,
                    model: { icon: 'hidden', label: { type: 'text' } },
                    clickClose: true,
                    radio: true,
                    layVerify: 'required',
                    on: function (data) {
                      layui.xmSelect.render({
                        el: '#region_id',
                        name: 'region_id',
                        filterable: false,
                        initValue: '',
                        data: [],
                        model: { icon: 'hidden', label: { type: 'text' } },
                        clickClose: false,
                        radio: true,
                        layVerify: 'required',
                      })

                      //arr:  当前多选已选中的数据
                      var arr = data.arr
                      if (arr.length) {
                        // 查询 area.
                        getAraes(arr[0]['id'])
                      }
                    },
                  })
                  if (res.code) {
                    layui.popup.failure(res.msg)
                  }
                },
              })
            }

            // 字段 服务器ID server_id
            layui.use(['jquery', 'xmSelect', 'popup'], function () {
              getLines()
              layui.$.ajax({
                url: '/app/admin/v1-server/select2?format=tree',
                data: {
                  field: PRIMARY_KEY,
                  order: 'desc',
                },
                dataType: 'json',
                success: function (res) {
                  let value = layui.$('#server_id').attr('value')
                  let initValue = value ? value.split(',') : []
                  layui.xmSelect.render({
                    el: '#server_id',
                    name: 'server_id',
                    initValue: initValue,
                    filterable: true,
                    data: res.data,
                    model: { icon: 'hidden', label: { type: 'text' } },
                    clickClose: true,
                    radio: true,
                    layVerify: 'required',
                  })
                  if (res.code) {
                    layui.popup.failure(res.msg)
                  }
                },
              })
            })

            // ajax返回失败
            if (res.code) {
              layui.popup.failure(res.msg)
            }
          },
        })
      })

      //提交事件
      layui.use(['form', 'popup'], function () {
        // 字段验证允许为空
        layui.form.verify({
          phone: [/(^$)|^1\d{10}$/, '请输入正确的手机号'],
          email: [
            /(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
            '邮箱格式不正确',
          ],
          url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, '链接格式不正确'],
          number: [/(^$)|^\d+$/, '只能填写数字'],
          date: [
            /(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/,
            '日期格式不正确',
          ],
          identity: [
            /(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/,
            '请输入正确的身份证号',
          ],
        })
        layui.form.on('submit(save)', function (data) {
          data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY]
          layui.$.ajax({
            url: UPDATE_API,
            type: 'POST',
            dateType: 'json',
            data: data.field,
            success: function (res) {
              if (res.code) {
                return layui.popup.failure(res.msg)
              }
              return layui.popup.success('操作成功', function () {
                parent.refreshTable()
                parent.layer.close(parent.layer.getFrameIndex(window.name))
              })
            },
          })
          return false
        })
      })
    </script>
  </body>
</html>
